<template>
  <div class="map-view">
    <v-chart :options="mapOptions"></v-chart>
  </div>
</template>

<script>
import commonCardMixin from '@/mixins/commonCardMixin'

export default {
  name: 'MapView',
  mixins: [commonCardMixin],
  computed: {
    mapOptions () {
      let test = [
        {
          name: '北京市市中心经纬度',
          value: [116.41667, 39.91667]
        }, {
          name: '上海市区经纬度',
          value: [121.43333, 34.50000]
        }, {
          name: '天津市区经纬度',
          value: [117.20000, 39.13333]
        }, {
          name: '香港经纬度',
          value: [114.10000, 22.20000]
        }, {
          name: '广州经纬度',
          value: [113.23333, 23.16667]
        }, {
          name: '珠海经纬度',
          value: [113.51667, 22.30000]
        }, {
          name: '深圳经纬度',
          value: [114.06667, 22.61667]
        }, {
          name: '杭州经纬度',
          value: [120.20000, 30.26667]
        }, {
          name: '重庆市区经纬度',
          value: [106.45000, 29.56667]
        }, {
          name: '青岛经纬度',
          value: [120.33333, 36.06667]
        }, {
          name: '厦门经纬度',
          value: [118.10000, 24.46667]
        }, {
          name: '福州经纬度',
          value: [119.30000, 26.08333]
        }, {
          name: '兰州经纬度',
          value: [103.73333, 36.03333]
        }, {
          name: '贵阳经纬度',
          value: [106.71667, 26.56667]
        }, {
          name: '长沙经纬度',
          value: [113.00000, 28.21667]
        }, {
          name: '南京经纬度',
          value: [118.78333, 32.05000]
        }, {
          name: '南昌经纬度',
          value: [115.90000, 28.68333]
        }, {
          name: '沈阳经纬度',
          value: [123.38333, 41.80000]
        }, {
          name: '太原经纬度',
          value: [112.53333, 37.86667]
        }, {
          name: '成都经纬度',
          value: [104.06667, 30.66667]
        }, {
          name: '拉萨经纬度',
          value: [91.00000, 29.60000]
        }, {
          name: '乌鲁木齐经纬度',
          value: [87.68333, 43.76667]
        }, {
          name: '昆明经纬度',
          value: [102.73333, 25.05000]
        }, {
          name: '西安经纬度',
          value: [108.95000, 34.26667]
        }, {
          name: '西宁经纬度',
          value: [101.75000, 36.56667]
        }, {
          name: '银川经纬度',
          value: [106.26667, 38.46667]
        }, {
          name: '兰浩特经纬度',
          value: [122.08333, 46.06667]
        }, {
          name: '哈尔滨经纬度',
          value: [126.63333, 45.75000]
        }, {
          name: '长春经纬度',
          value: [125.35000, 43.88333]
        }, {
          name: '武汉经纬度',
          value: [114.31667, 30.51667]
        }, {
          name: '郑州经纬度',
          value: [113.65000, 34.76667]
        }, {
          name: '石家庄经纬度',
          value: [114.48333, 38.03333]
        }, {
          name: '三亚经纬度',
          value: [109.50000, 18.20000]
        }, {
          name: '海口经纬度',
          value: [110.35000, 20.01667]
        }, {
          name: '澳门经纬度',
          value: [113.50000, 22.20000]
        }]
      test = test.map(item => {
        const {
          name,
          value
        } = item
        value.push(Math.random() * 100 + 50)
        return {
          name,
          value
        }
      })
      return {
        title: {
          text: '慕课外卖销售数据大盘',
          subtext: '销售趋势统计',
          left: 'center'
        },
        bmap: {
          center: [104.114129, 37.550339],
          zoom: 5,
          roam: false,
          mapStyle: {
            styleJson: [{
              /*eslint-disable*/
              'featureType': 'water',
              'elementType': 'all',
              'stylers': {
                'color': '#d1d1d1'
              }
            }, {
              'featureType': 'land',
              'elementType': 'all',
              'stylers': {
                'color': '#f3f3f3'
              }
            }, {
              'featureType': 'railway',
              'elementType': 'all',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'highway',
              'elementType': 'all',
              'stylers': {
                'color': '#fdfdfd'
              }
            }, {
              'featureType': 'highway',
              'elementType': 'labels',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'arterial',
              'elementType': 'geometry',
              'stylers': {
                'color': '#fefefe'
              }
            }, {
              'featureType': 'arterial',
              'elementType': 'geometry.fill',
              'stylers': {
                'color': '#fefefe'
              }
            }, {
              'featureType': 'poi',
              'elementType': 'all',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'green',
              'elementType': 'all',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'subway',
              'elementType': 'all',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'manmade',
              'elementType': 'all',
              'stylers': {
                'color': '#d1d1d1'
              }
            }, {
              'featureType': 'local',
              'elementType': 'all',
              'stylers': {
                'color': '#d1d1d1'
              }
            }, {
              'featureType': 'arterial',
              'elementType': 'labels',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'boundary',
              'elementType': 'all',
              'stylers': {
                'color': '#fefefe'
              }
            }, {
              'featureType': 'building',
              'elementType': 'all',
              'stylers': {
                'color': '#d1d1d1'
              }
            }, {
              'featureType': 'label',
              'elementType': 'labels.text.fill',
              'stylers': {
                'color': '#999999'
              }
            }]
          }
          /* eslint-enable */
        },
        tooltip: {},
        series: [{
          name: '销售额',
          type: 'scatter',
          coordinateSystem: 'bmap',
          data: test,
          encode: {
            value: 2
          },
          symbolSize (val) {
            console.log(val)
            return val[2] / 10
          }
        }
        ]
      }
    }
  }

}
</script>

<style scoped>
.map-view {
  height: 600px;
  width: 100%;
}
</style>
